<head>
    <link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet"/>

    <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
    <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
    <style>
        .center-screen {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            min-height: 100vh;
        }
    </style>
</head>

<body>
<div class="center-screen">
    <video-js
            id=vid1 width=1200 height=600 class="vjs-default-skin" controls
    >
    </video-js>
</div>

<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script>
    const url = "localhost"
    const internalPort = 9608 //corresponds to the InternalPort in the config of pp node
    const fileHash = "[Hash of the file to be streamed]";
    const walletAddress = "[wallet address of the owner]";
    const p2pAddress = "[p2p address of the owner]";
    let streamInfo;
    httpGetAsync(`http://${url}:${internalPort}/streamVideoStorageInfo/${fileHash}`, function(responseText) {
        streamInfo = JSON.parse(responseText);
        playVideo();
    })

    function playVideo() {
        var player = videojs('vid1');
        videojs.Hls.xhr.beforeRequest = function (options) {
            const videoSegment = options.uri.split('/').pop();
            const sliceInfo = getSliceInfo(videoSegment);
            options.uri = `http://${url}:${internalPort}/streamVideo/${sliceInfo.slice_storage_info.slice_hash}`
            options.method = 'POST';
            options.body = JSON.stringify({
                fileHash,
                fileName: streamInfo.FileInfo.file_name,
                walletAddress,
                p2pAddress,
                restAddress: streamInfo.FileInfo.rest_address,
                sign: streamInfo.FileInfo.sign,
                spP2pAddress: streamInfo.FileInfo.sp_p2p_address,
                savePath: streamInfo.FileInfo.save_path,
                sliceInfo
            })
            return options;
        };
        player.ready(function () {
            player.src({
                src: `http://${url}:${internalPort}/streamVideo/${streamInfo.HeaderFile}`,
                type: 'application/x-mpegURL',
            });
        });
        player.play();
    }

    function getSliceInfo(videoSegment) {
        return streamInfo.SegmentToSliceInfo[videoSegment]
    }

    function httpGetAsync(theUrl, callback)
    {
        const xmlHttp = new XMLHttpRequest();
        xmlHttp.onreadystatechange = function() {
            if (xmlHttp.readyState === 4 && xmlHttp.status === 200)
                callback(xmlHttp.responseText);
        }
        xmlHttp.open("GET", theUrl, true); // true for asynchronous
        xmlHttp.send(null);
    }
</script>
</body>
